<template>
	<view>
		<swiper v-if="refashType == false" class="swiper" :current="current" indicator-dots indicator-color="#e3e3e5" indicator-active-color="#0984fd">
			<swiper-item v-for="(item,index) in List" :key="index">
				<view class="title">
					<view class="left-box">
						{{item.title}}
					</view>
					<view class="right-box" @click="setcurrent(index)">
						设为首屏
					</view>
					</view>
				<scroll-view class="scrollview" scroll-y>
				<view class="model-box">
					<view class="model-item" :class="{'block' : it.display && it.display == 'block'}" @click="jump(it)" v-for="(it,idx) in item.result" :key="idx" :style="{'backgroundColor':it.backgroundcolor}">
						<image class="model-icon" :src="it.icon" mode="aspectFit">
						</image>
						<view class="model-text" :style="{'color':it.color}">
							{{it.name}}
						</view>
					</view>
				</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<ScanQRcode></ScanQRcode>
	</view>

</template>

<script>
	import ScanQRcode from '@/components/ScanQRcode/ScanQRcode';
	export default {
		components:{
			ScanQRcode,
		},
		data() {
			return {
				bindFlag: false,
				current:0,
				refashType:false,
				List:[
					{
						title:'系统首页',
						result:[
							{
								icon:'/static/image/index/money_icon.png',
								name:'销售管理',
								color:'white',
								backgroundcolor:'#8ac6de',
								url:'/subcontractList/order/salesAdmin/index/index',
								target:'page'
							},
							{
								icon:'/static/image/index/cart_icon.png',
								name:'采购管理',
								color:'white',
								backgroundcolor:'#efc563',
								url:'/subcontractList/order/purchase/index/index',
								target:'page'
							},
							{
								icon:'/static/image/index/home_icon.png',
								name:'仓储管理',
								color:'white',
								backgroundcolor:'#499595',
								url:'/subcontractList/storage/index/index',
								target:'page'
							},
							{
								icon:'/static/image/index/setting_icon.png',
								name:'生产管理',
								color:'white',
								backgroundcolor:'#b8956b',
								url:'',
								target:'page'
							},
							{
								icon:'/static/image/index/qs_icon.png',
								name:'质量管理',
								color:'white',
								backgroundcolor:'#fc6f54',
								url:'',
								taget:'page'
							},
							{
								icon:'/static/image/index/crm_icon.png',
								name:'CRM',
								color:'white',
								backgroundcolor:'#3190ee',
								url:'',
								target:'page'
							},
							{
								icon:'/static/image/index/email_icon.png',
								name:'消息管理',
								color:'white',
								display:'block',
								backgroundcolor:'#3190ee',
								url:'',
								target:'page'
							},
						]
					},
					{
						title:'项目任务管理',
						result:[
							{
								icon:'/static/image/index/target_icon.png',
								name:'目标',
								color:'black',
								backgroundcolor:'#eaf4fe',
								url:'/subcontractList/targetAdmin/index/index',
								target:'page'
							},
							{
								icon:'/static/image/index/continuous_improvement.png',
								name:'持续改进',
								color:'black',
								backgroundcolor:'#fcf5e5',
								url:'',
								target:'page'
							},
							{
								icon:'/static/image/index/implement_icon.png',
								name:'执行',
								color:'black',
								backgroundcolor:'#e7f6f1',
								url:'',
								target:'page'
							},
							{
								icon:'/static/image/index/project_icon.png',
								name:'项目',
								color:'black',
								backgroundcolor:'#eaf4fe',
								url:'/subcontractList/project/index/index',
								target:'page'
							},
							{
								icon:'/static/image/index/meeting_icon.png',
								name:'会议',
								color:'black',
								backgroundcolor:'#fcf5e5',
								url:'',
								target:'page'
							},
							{
								icon:'/static/image/index/task_icon.png',
								name:'任务',
								color:'black',
								backgroundcolor:'#e7f6f1',
								url:'/pages/mask/index/index',
								target:'tab'
							},
							{
								icon:'/static/image/index/email_icon_blue.png',
								name:'消息通知',
								color:'black',
								display:'block',
								backgroundcolor:'#eaf4fe',
								url:'',
								target:'page'
							},
						]
					},
					{
						title:'EAM设备管理',
						result:[
							{
								icon:'/static/image/index/monitor_icon.png',
								name:'实时监控',
								color:'white',
								backgroundcolor:'#3190ee',
								url:'',
								target:'page'
							},
							{
								icon:'/static/image/index/warning_icon.png',
								name:'设备报警',
								color:'white',
								backgroundcolor:'#efc563',
								url:'',
								target:'page'
							},
							{
								icon:'/static/image/index/bg-personne-linformation.png',
								name:'人员看板',
								color:'white',
								backgroundcolor:'#55c69b',
								url:'',
								target:'page'
							},
							{
								icon:'/static/image/index/operation_icon.png',
								name:'运维任务单',
								color:'white',
								backgroundcolor:'#3190ee',
								url:'',
								target:'page'
							},
							{
								icon:'/static/image/index/calendar_icon.png',
								name:'设备日历',
								color:'white',
								backgroundcolor:'#efc563',
								url:'',
								target:'page'
							},
							{
								icon:'/static/image/index/achievements_icon.png',
								name:'设备绩效',
								color:'white',
								backgroundcolor:'#55c69b',
								url:'',
								target:'page'
							},
							{
								icon:'/static/image/index/email_icon_blue.png',
								name:'消息通知',
								color:'black',
								display:'block',
								backgroundcolor:'#eaf4fe',
								url:'',
								target:'page'
							},
						],
					},
				],
			}
		},
		onShow() {
			console.log(111);
			const current = uni.getStorageSync('current');
			if(current){
				let data = [];
				let list = this.List;
				data.push(list[current]);
				list.splice(current, 1);
				list.forEach(res=>{
					data.push(res);
				})
				this.List = data;
				this.current = 0;
			}
		},
		methods: {
			/***  关闭绑定手机弹框 */
			closeBind(){
				this.bindFlag = false
			},

			/**
			 * 设置默认显示滑屏下标
			 */
			setcurrent:function(index){
				let that =this;
				this.refashType = true;
				let data = [];
				let list = this.List;
				data.push(list[index]);
				list.splice(index, 1);
				list.forEach(res=>{
					data.push(res);
				})
				this.List = data;
				this.current = 0;
				this.$nextTick(function(){
					that.refashType = false;
				})
				uni.setStorageSync('current', index);
				uni.showToast({
					title: '已将当前页设为首屏',
					icon:'none',
					duration: 2000
				});

			},
			test: function() {
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log('获取服务商', res)
						if (~res.provider.indexOf('weixin')) {
							console.log(111);
							wx.qy.login({
								success: function(res) {
									console.log('企业微信', res);
								},
								fail: function(err) {
									console.log(err);
								}
							});

						}
					}
				});
			},
			jump: function(params) {
				if(params.url == ''){
					uni.showToast({
						title: '该功能暂未开放',
						icon: 'none',
						duration: 2000
					});
				}else{
					if(params.target == 'page'){
						uni.navigateTo({
							url:params.url
						});
					}else if(params.target == 'tab'){
						getApp().globalData.refreshPage = params.target;
						uni.switchTab({
							url: params.url
						});
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiper{
		height: 100vh;
	}
	.scrollview{
		width: 100%;
		height: calc(100vh - 80rpx);
	}
	.title{
		font-size:28rpx;
		color:#353333;
		padding:0 50rpx;
		line-height:80rpx;
		display: flex;
		justify-content: space-between;
		.right-box{
			color: white;
			background-color: #3190ee;
			text-align: center;
			line-height: 60rpx;
			margin:10rpx 0;
			border-radius: 10rpx;
			padding:0 20rpx;
		}
	}

	.model-box {
		width: calc(100% - 100rpx);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 50rpx;
		border-radius: 10rpx;
		overflow: hidden;

		.model-item {
			width: calc(50% - 5rpx);
			height: 22vh;
			margin-bottom: 10rpx;

			.model-icon {
				width: 40%;
				height: 40%;
				display: block;
				margin: 0 auto;
				margin-top: 15%;
			}

			.model-text {
				text-align: center;
				color: white;
				line-height: 100rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		.block{
			width: 100%;
			.model-icon {
				width: 40%;
				height: 40%;
				display: block;
				margin: 0 auto;
				margin-top:5%;
			}
		}
		.model-item:nth-child(2n) {
			margin-right: 0;
		}
	}
	.second{
		.model-item{
			width: calc(50% - 15rpx);
			margin-bottom: 30rpx;
			.model-text{
				color: black;
			}
		}
	}
</style>
